<script lang="ts" setup>
import v from '@/plugins/validate'
import useUser from '@/composables/useUser'
import { useRouter } from 'vue-router'

const { login, loginRespone } = useUser()
const router = useRouter()
const { yup, useField, useForm } = v

const { handleSubmit } = useForm({
  initialValues: {
    name: '',
    password: '',
  },
  validationSchema: {
    name: yup.string().required().label('账号'),
    password: yup.string().required().label('密码'),
  },
})

const { errorMessage: errorName, value: name } = useField('name', {})
const { errorMessage: errorPassword, value: password } = useField('password', {})

const onsubmit = handleSubmit(async (values) => {
  await login(values)
  router.push({ name: 'home', query: { userId: loginRespone.value?.userId } })
})
</script>

<template>
  <div class="w-screen h-screen flex justify-center items-center">
    <div class="bg-gray-100 w-[720px] h-[350px] grid grid-cols-2 rounded-lg shadow-md overflow-hidden">
      <div class="p-10">
        <h2 class="text-center text-lg">会员登录</h2>
        <form class="mt-8" @submit="onsubmit">
          <input placeholder="请输入手机号码或邮箱" class="lj-input" v-model="name" />
          <h2 class="error">{{ errorName }}</h2>

          <input placeholder="请输入密码" type="password" class="lj-input mt-3" v-model="password" />
          <h2 class="error">{{ errorPassword }}</h2>

          <button class="lj-button mt-3">登录</button>
        </form>
        <div class="grid grid-flow-col gap-2 justify-center items-center mt-5">
          <a href="" class="lj-a">会员注册</a>
          <a href="" class="lj-a">找回密码</a>
        </div>
      </div>

      <!-- img -->
      <div>
        <img src="../../public/draw.jpg" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.lj-input {
  @apply w-full py-2 px-2 outline-none rounded-md text-gray-600 text-sm placeholder:text-sm focus:ring-2 ring-violet-500 border-none duration-500;
}
.lj-button {
  @apply w-full bg-violet-700  rounded-md py-2 hover:bg-violet-300 duration-300;
}
.lj-a {
  @apply text-sm text-gray-500;
}
.error {
  @apply text-xs text-red-400 mt-1;
}
</style>
